<template>
  <div class="role">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="pageContentConfig"
      ref="pageContentRef"
      @createData="changeDialogVisible"
      @edit="handleEdit"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="pageModalConfig"
      :defaultInfo="defaultInfo"
      :otherInfo="otherInfo"
    >
      <el-tree
        ref="elTreeRef"
        :data="allMenusData"
        show-checkbox
        node-key="id"
        :props="{
          label: 'name',
          children: 'children',
        }"
        @check="getNodes"
      />
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue";
import { storeToRefs } from "pinia";
import useMainStore from "../../../../stores/main/main";
import PageSearch from "@/components/page-search";
import PageContent from "@/components/page-content";
import PageModal from "@/components/page-modal";
import { pageSearchConfig } from "./config/search";
import { pageContentConfig } from "./config/content";
import { pageModalConfig } from "./config/modal";
import { usePageSearch } from "@/hooks/usePageSearch";
import { usePageModal } from "@/hooks/usePageModal";
import { mapMenusToId } from "@/utils/map-menu";

//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch();

const defaultCheckedKeys = ref<any>([]);
const elTreeRef = ref();
const editCb = (obj: any) => {
  defaultCheckedKeys.value = mapMenusToId(obj.menuList ?? []);
  nextTick(() => {
    elTreeRef.value.setCheckedKeys(defaultCheckedKeys.value);
  });
};
// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, changeDialogVisible, handleEdit] =
  usePageModal(undefined, editCb);

const { allMenusData } = storeToRefs(useMainStore());

//选中的数据
const otherInfo = ref({});
const getNodes = (data1: any, data2: any) => {
  console.log(data2);
  // ...data2.halfCheckedKeys
  let menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys];

  otherInfo.value = { menuList }; //对象增强写法
};
</script>

<style lang="less" scoped>
.role {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
